<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>交通气象云平台</title>
	<#include "/header.html">

	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/AdminLTE.min.css">

	<link rel="stylesheet" href="${request.contextPath}/statics/css/all-skins.min.css">
	<link rel="stylesheet" href="${request.contextPath}/statics/css/index.css">
	<script type="text/javascript" src="${request.contextPath}/statics/libs/jquery.min.js"></script>

    <script src="${request.contextPath}/statics/libs/html5shiv.min.js"></script>
    <script src="${request.contextPath}/statics/libs/respond.min.js"></script>
	<!--<script  src="http://webapi.amap.com/maps?v=1.4.6&key=c6b7a4bc6c8f1430fc31c479c0a223e5&plugin=AMap.MarkerClusterer,AMap.TruckDriving,AMap.Geocoder,AMap.Autocomplete,AMap.PlaceSearch,AMap.CitySearch,AMap.CitySearch"></script>
  <script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>-->
  </head>
<style type="text/css">
	iframe{
		width:100%;
		height:105%;
		/*overflow: hidden;*/
		border: medium none;
		}
	.bb1{
		position: fixed;
		top:0px;
		left: 0px;
		width:100%;
		height:100%;
		background: rgba(0,0,0,0.7);
		display:none;
		z-index: 9999;
	}
	.bb{
		position: fixed;
		top:0px;
		left: 0px;
		width:100%;
		height:100%;
		background: rgba(0,0,0,0.7);
		display:none;
		z-index: 9999;
	}
</style>
  <body style="background: url('../../statics/image/index_bg.png');background-size: 100%;">
	<div style="width: 100%;position: relative">
      	<!-- 标题 -->
		<div  style="background: url('../../statics/image/index_title3.png');background-size: 100% 100%;">
<!--		<img style="width: 100%;position: relative"  src="statics/image/index_title3.png" alt="">-->
		<p style="color: #00e4ff;font-size: 40px;letter-spacing: 4px;font-weight: 500;text-align: center;">
			<img src="../../statics/image/index_logo3.png" style="width: 2.8%;margin-bottom: 11px;margin-top: 9px"																											   alt="">
			气象云平台</p>
	</div>
		<div style="position:relative; color:#00e4ff;width: 100%;">
		<div class="a1" style="font-weight:400; font-size:18px;position: absolute;left:20px;top: -50px">
			时间&nbsp;:&nbsp; <span class="p" id="showTimeDiv"	style="color:#00e4ff; font-weight:400; font-size:18px;"></span>
		</div>
		<div class="c1" style="font-weight:500; font-size:18px;position: absolute;right:100px;top:-36px;width: 11%;height: 32px;
		background: url('../../statics/image/head_portrait2.png')no-repeat" id="loginName">
<!--			<img src="../../statics/image/head_portrait2.png" alt="">-->
			<span >用户名:</span></div>
<!--		<div class="c1" style="width: 10%;position: absolute;right: 40px;top:16px"><i class="fa fa-cog" onclick="houtai();"></i></div>-->
		<div class="b1" style="width:80px;position: absolute;right:50px;top:-34px" >
			<a href="index1.html" style="font-weight:400; font-size:18px; color:#00e4ff;">
				<img src="statics/image/set.png" style="width: 25px;margin-top: -4px" alt=""></a>
			<a href="logout" style="font-weight:400; font-size:18px; color:#00e4ff;margin-left: 5px;">
			<img src="statics/image/index_tuichu.png" style="width: 28px;margin-top: -4px" alt=""></a></div>
	</div>

		<!-- 内容 -->
		<!-- 左边 -->
		<div class="zuo" style="width: 30%" >

		<div class="box1" style="width:100%;height:32%;margin-left:10px;position: relative;margin-top: 12px;
		background: url('../../statics/image/data.png');background-size: 100% 100%;border: none;padding:4px">
			<div class="jiao">	</div>
			<div class="biaoti1" style="width:37%;background: url('${request.contextPath}/statics/image/index_title2.png');
			background-size: 100% 100%;margin:-317px 0 0 -5px">

				<p style="margin: 0 auto;color: #fff;width: fit-content;font-size: 20px;height: 100%;line-height: 200%">
<!--					<img alt="" src="../statics/image/zhuye_2.png">-->
					气象站实时数据</p>
				<div style="position: absolute;left: 50%;top:18px;font-size: 14px">
					<span class="zx" style="color: #0efcff">在线:</span>
					<span class="zx-number" style="color: #f7f802" id="qxzOnline">0</span>
					&nbsp
					<span class="lx" style="color: #0efcff">离线:</span>
					<span class="lx-number" style="color: red" id="qxzOffline">0</span>
				</div>
				<button style="position: absolute;right: 12px;top:8px;background: none;border: none">
				<img src="statics/image/more_not1.png" alt="" onclick="findMoreWeatherStation()"></button>
			</div>
			<div id="weatherChart" style="width:100%;height:85%;"></div>
		</div>


		<div class="box2" style="width:100%;height:32%;margin-left:10px;position: relative;margin-top: 12px;
		background: url('${request.contextPath}/statics/image/data.png');background-size: 100% 100%;border: none;padding:4px">
			<div class="jiao"> </div>
			<div class="biaoti1" style="width:37%;background: url('${request.contextPath}/statics/image/index_title2.png');
			background-size: 100% 100%;margin:-317px 0 0 -5px">
				<p	style="margin: 0 auto;color: #fff;width: fit-content;font-size: 20px;height: 100%;line-height: 200%">
<!--					<img alt="" src="../statics/image/zhuye_2.png">&nbsp;-->
					地面探测器实时数据</p>
				<div style="position: absolute;left: 50%;top:18px;font-size: 14px">
					<span class="zx" style="color: #0efcff">在线:</span>
					<span class="zx-number" style="color: #f7f802" id="dmtcqOnline">0</span>
					&nbsp
					<span class="lx" style="color: #0efcff">离线:</span>
					<span class="lx-number" style="color: red" id="dmtcqOffline">0</span>
				</div>
				<button style="position: absolute;right: 12px;top:8px;background: none;border: none">
				<img src="statics/image/more_not1.png" alt="" onclick="findMoreRoadDetector()"></button>
			</div>
			<div id="roadChart" style="width:100%;height:85%;"></div>
		</div>
		<div class="box3" style="width:100%;height:32%;margin-left:10px;position: relative;margin-top: 12px;
		background: url('${request.contextPath}/statics/image/data.png');background-size: 100% 100%;border: none;padding:4px">
			<div class="jiao"> </div>
			<div class="biaoti1" style="width:37%;background: url('${request.contextPath}/statics/image/index_title2.png');
			background-size: 100% 100%;margin:-317px 0 0 -5px">
				<p	style="margin: 0 auto;color: #fff;width: fit-content;font-size: 20px;height: 100%;line-height: 200%">
<!--					<img alt="" src="../statics/image/zhuye_2.png">-->
					能见度仪实时数据</p>
				<div style="position: absolute;left: 50%;top:18px;font-size: 14px">
					<span class="zx" style="color: #0efcff">在线:</span>
					<span class="zx-number" style="color: #f7f802" id="njdOnline">0</span>
					&nbsp
					<span class="lx" style="color: #0efcff">离线:</span>
					<span class="zx-number" style="color: red" id="njdOffline">0</span>
				</div>
				<button style="position: absolute;right: 12px;top:8px;background: none;border: none">
				<img src="statics/image/more_not1.png" alt="" onclick="findMoreVisibility()"></button>
			</div>
			<div id="visibilityChart" style="width:100%;height:85%;"></div>
		</div>
	</div>


		<!-- 中间 -->
		<div class="center" style="width: 69%; height: 1000px; position: relative;">
		<div class="box4" style="margin-left:24px;background-image: url('../../statics/image/shandong.png');background-size: 100% 100%;">
			<!--<div class="ditu" id="ditu"></div>-->
			<!-- 左边 -->
			<ul class="left">
				<li class="aa" style="cursor: pointer;
				width: 121px;height: 46px;
				background: url('${request.contextPath}/statics/image/index_kuang.png')">
					<img src="../statics/image/index_line.png"style="width: 14px;margin-left: 13px;
    margin-top: -5px;" title="设备在线率">
					<span style="color: #a9ddee;font-size: 15px;line-height: 3">设备在线率</span>
				</li>
				<div class="bb" >
					<div style="position:relative;width: 1920px;height: 1080px">
					<button id="guanbi2" class="guanbi" style="background: url('../../statics/image/list_close.png') no-repeat;border: none;
            background-size: 100% 100%;position: absolute;right:22%;top:11%;
            width: 16px;height: 16px"></button>
					<iframe src="../modules/baseinfo/Shebeizaixian.html" ></iframe>
					</div>
				</div>

				<li style="cursor: pointer;width: 121px;height: 46px;
				background: url('${request.contextPath}/statics/image/index_kuang.png')" onclick="showAlarmDiv()">
					<img src="../statics/image/index_xinxi.png" style="width: 14px;margin-left: 15px;
    margin-top: -4px;"
					title="报警信息">
					<span style="color: #a9ddee;font-size: 15px;line-height: 3">报警信息</span>
				</li>
			</ul>
			<!-- 右边 -->
			<ul class="right">
				<li style="cursor: pointer;float: left;overflow: hidden" onclick="equipmentInfo()"><img
					src="../statics/image/tuli_zjz2.png"
					title="自建站信息"></li>
			</ul>
			<div style="width:500px;height:310px;position: absolute;right: 10%;top: 26%;
			background: url('statics/image/alarm_box.png') no-repeat;background-size: 100%;
			padding: 50px;cursor: pointer;display: none;" id="elementAlertInfoParent">
				<div class="list-baojing" style="color: #fff;text-align: center;height: 40px;">
					<button style="float: left;width: 17%;background: none;border: none" onclick="findMore()">
						<img style="margin-bottom: 3px;"  src="statics/image/list_m.png" alt="">&nbsp
						<span style="font-size: 14px;" >更多</span>
					</button>
					<p  style="font-size: 18px;color: #fff;float:left;width: 66%;margin-bottom: 4px">报警信息详情</p>
					<img style="width: 14px;float: right;display: inline-block;margin:6px 6px 0 0" src="statics/image/list_close.png" alt="" onclick="closeElementAlarm()">
				</div>
				<div class="baojing-content">
				<ul class="baojing-da" style="width: 100%;;text-align: center;height: 190px;overflow-y: hidden;" id="elementAlertInfo">
				</ul>
				</div>
			</div>

			<div style="width:500px;height:300px;position: absolute;right: 10%;top:52%;
			background: url('statics/image/alarm_box.png') no-repeat;background-size: 100%;
			padding: 50px;cursor: pointer;display: none;"id="alertInfoParent">
				<div class="list-baojing" style="color: #fff;text-align: center;height: 40px;">
					<button style="float: left;width: 17%;background: none;border: none"onclick="findMore1()">
						<img style="margin-bottom: 3px;" src="statics/image/list_m.png" alt="">&nbsp
						<span style="font-size: 14px;">更多</span>
					</button>
					<p  style="font-size: 18px;color: #fff;float:left;width: 66%;">报警信息
						<!--<img style="width: 14px;margin-left: 2px;margin-bottom: 3px;" src="../../statics/image/list_volume1.png" alt="">-->
					</p>
					<img style="width: 14px;float: right;display: inline-block;margin:6px 6px 0 0" src="statics/image/list_close.png" alt="" onclick="closeAlarm()">
				</div>
				<ul style="width: 100%;;text-align: center;height: 190px;overflow-y: hidden;" id="alertInfo">
				</ul>
			</div>
			<ul style=" position: absolute;right: 20px;bottom: 162px">
				<li style="background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px;margin: 14px 0;position: relative;text-align: center;">
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="roadSurfaceTempCount" onclick="showElementAlarmInfo(this,1)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="lmwdSpan" onclick="showInsPoint(1)">-</p>
					<input id="xy1" type="hidden" value="">
					<div>
					<img src="statics/image/list_wdj.png" style="width: 74px;display: block;margin: 0 auto;" alt="">
<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
					</div>
				</li>
				<li style="	background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px ;margin: 14px 0;position: relative;text-align: center;">
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="frictionCount" onclick="showElementAlarmInfo(this,2)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="shcdSpan" onclick="showInsPoint(2)">-</p>
					<input id="xy2" type="hidden" value="">
					<img src="statics/image/list_shcd.png" style="width: 82px;display: block;margin: 0 auto;" alt="">
					<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
				</li>
				<li style="	background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px;margin: 14px 0 ;position: relative;text-align: center;">
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="waterFilmHeightCount" onclick="showElementAlarmInfo(this,4)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="smhdSpan" onclick="showInsPoint(4)">-</p>
					<input id="xy4" type="hidden" value="">
					<img src="statics/image/list_smhd.png" style="width: 79px;display: block;margin: 0 auto;" alt="">
					<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
				</li>
				<li style="	background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px;margin: 14px 0 ;position: relative;text-align: center;" >
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="visibilityCount" onclick="showElementAlarmInfo(this,3)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="njdSpan" onclick="showInsPoint(3)">-</p>
					<input id="xy3" type="hidden" value="">
					<img src="statics/image/list_njd.png" style="width: 72px;display: block;margin: 0 auto;" alt="">
					<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
				</li>
				<li style="	background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px;margin: 14px 0 ;position: relative;text-align: center;">
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="airTempCount" onclick="showElementAlarmInfo(this,5)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="kqwdSpan" onclick="showInsPoint(5)">-</p>
					<input id="xy5" type="hidden" value="">
					<img src="statics/image/list_qw.png" style="width: 54px;display: block;margin: 0 auto;" alt="">
					<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
				</li>
				<li style="	background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px;margin:14px 0 ;position: relative;text-align: center;">
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="relativeHumidityCount" onclick="showElementAlarmInfo(this,6)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="xdsdSpan" onclick="showInsPoint(6)">-</p>
					<input id="xy6" type="hidden" value="">
					<img src="statics/image/list_sd.png" style="width: 54px;display: block;margin: 0 auto;" alt="">
					<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
				</li>
				<li style="	background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px;margin:14px 0 ;position: relative;text-align: center;">
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="windSpeedCount" onclick="showElementAlarmInfo(this,7)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="fsSpan" onclick="showInsPoint(7)">-</p>
					<input id="xy7" type="hidden" value="">
					<img src="statics/image/list_fs.png" style="width: 54px;display: block;margin: 0 auto;" alt="">
					<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
				</li>
				<li style="	background: url('${request.contextPath}/statics/image/tuli_kuang.png');
				 width:126px;height:51px;margin:14px 0 ;position: relative;text-align: center;">
					<div style="width: 24px;height: 18px;background: #ff0000;position: absolute;right:-7px;top:-7px;border-radius: 6px;">
						<p style="text-align: center;color: #fff;font-size: 14px;cursor: pointer;" id="precipitationCount" onclick="showElementAlarmInfo(this,8)">0</p>
					</div>
					<p style="color: #f7f802;font-size: 20px;margin: 0;cursor: pointer;display: inline;" id="jslSpan" onclick="showInsPoint(8)">-</p>
					<input id="xy8" type="hidden" value="">
					<img src="statics/image/list_jsl.png" style="width: 70px;display: block;margin: 0 auto;" alt="">
					<!--					<span style="color: #a9ddee;font-size: 16px">路面温度</span>-->
				</li>
			</ul>
		</div>
	</div>
	</div>
</body>
<script type="text/javascript" src="${request.contextPath}/statics/js/windexBr.js"></script>

<script type="text/javascript">
	$(function(){
		$('.aa1').click(function(){
			$('.bb1').show()
		})
	})

	$(function(){
		$('#guanbi1').click(function(){
			$('.bb1').hide()
		})
	})
	$(function(){
		$('#guanbi2').click(function(){
			$('.bb').hide()
		})
	})
	$(function(){
		$('.aa').click(function(){
			$('.bb').show()
		})
	})
</script>
</html>
